import { Skeleton } from 'antd';
import loadable from '@loadable/component';
import useDevice, { DEVICES } from '@/hooks/useDevice';

// 优先使用Layout目录下的组件
const DesktopLayout = loadable(() => import('./Layout/desktop'), {fallback: <Skeleton active/>});
const TabletLayout = loadable(() => import('./Layout/tablet'), {fallback: <Skeleton active/>});
const MobileLayout = loadable(() => import('./Layout/mobile'), {fallback: <Skeleton active/>});

export default props => {
    const device = useDevice();
    
    // 根据设备类型选择对应的Layout组件
    const getComponent = () => {
        switch (device) {
            case DEVICES.TABLET:
                return <TabletLayout {...props} />;
            case DEVICES.MOBILE:
                return <MobileLayout {...props} />;
            default:
                return <DesktopLayout {...props} />;
        }
    };

    return getComponent();
}
